<template>
  <UserCardList :user-list="userList" />
  <van-empty v-if="!userList || userList.length<1" description="搜索结果为空" />

</template>
<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.js";
import {showSuccessToast} from "vant";
import qs from "qs";
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();

const {tags} = route.query; //解构，相当于route.query.tags
const userList = ref([]);

onMounted(async ()=>{
  const userListData = await myAxios.get('/user/search/tags',{
    params: {
      tagNameList: tags
    },
    paramsSerializer: (params) => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response);
        return response?.data;
      })
      .catch(function (error) {
        console.log('/user/search/tags error', error);
        showSuccessToast('请求失败');
      })
  console.log(userListData);
  if (userListData){
    userListData.forEach(user => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
})

</script>

<style scoped>

</style>